<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:bs="http://none.cz">
<head th:include="common/layout::header"></head>
<body>
	<div th:substituteby="common/layout::menu"></div>
	<div class="container">
		<div th:include="common/layout::messages">
			cannot load messages
		</div>
		<h1 th:text="#{catalog.browse.h1}">Browse catalog</h1>
		<p th:if="${sec.hasRole('REDACTOR')}">
			<a th:href="@{/catalog/edit}" th:text="#{catalog.browse.add}" class="btn btn-primary" href="#">Add place</a>
		</p>
		
		<div class="accordion" id="filtreAccordion">
			<div class="accordion-group">
				<div class="accordion-heading">
					<a th:text="#{filtre.heading}" class="accordion-toggle" data-toggle="collapse" data-parent="#filtreAccordion" href="#collapseOne">Search <i class="icon-filter"></i></a>
				</div>
				<div th:classappend="${filtred}? 'in'" id="collapseOne" class="accordion-body collapse">
					<div class="accordion-inner">
						<form th:action="@{'/catalog'}" th:object="${form}" action="#" method="get" class="form-inline">
							<label for="type">Type</label>
							<select th:field="*{type}" name="type" id="type">
								<option value="" th:text="#{filtre.all}">All</option>
								<option value="1" th:each="type : ${allTypes}" th:value="${type}" th:text="#{${'place.types.' + type}}">Gasstation</option>
							</select>
							<input th:field="*{name}" th:placeholder="#{filtre.name}" type="text" id="name" name="name" placeholder="Name" />
							<button th:text="#{filtre.submit}" name="_submit" class="btn pull-right btn-primary" type="submit" value="submit">Search</button>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div th:each="place,status : ${page.content}" class="span12 place-box thumbnail">
				<div class="pull-right">
					<img src="http://placekitten.com/200/200" width="200" height="200" alt="map" />
				</div>
				<h2 th:text="${place.name}">Place name</h2>
				<p th:text="${place.description}">Popis</p>
				<table class="table">
					<thead>
						<tr>
							<th>Typ</th>
							<th>Lon</th>
							<th>Lat</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td th:text="${place.type}">Typ</td>
							<td th:text="${place.axisx}">Lon</td>
							<td th:text="${place.axisy}">Lat</td>
						</tr>
					</tbody>
				</table>
				<p class="pull-right"><a th:href="@{'/catalog/edit/' + ${place.id}}" th:if="${sec.hasRole('REDACTOR')}" th:text="#{catalog.browse.edit}" class="btn btn-small" href="#">Edit place</a></p>
				<p><a th:href="@{'/catalog/place/' + ${place.id}(name=${place.name})}" href="#" class="btn btn-info">More info</a></p>
			</div>
		</div>
		
		<div th:substituteby="common/layout::pagination"></div>
		
	</div>
	<div th:include="common/layout::js"></div>
</body>
</html>